<template>
  <ele-modal
    :width="950"
    :footer="null"
    :visible="visible"
    :title="'回收站'"
    @update:visible="updateVisible"
  >
    <vxe-grid v-bind="gridOptions">
      <template #operate="{ row }">
        <a @click="reback(row)">恢复</a>
      </template>
      <template #pager>
        <vxe-pager
          :layouts="[
            'Total',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump'
          ]"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </ele-modal>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import zbTable from '@/components/zbTable/recycleIndex.vue';
  import { recycling, resume } from '@/api/material/gem_attribute';

  const emit = defineEmits(['done', 'update:visible']);

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean
  });

  onMounted(() => {
    getList(tablePage.currentPage, tablePage.pageSize);
  });
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10
  });
  // 表格列配置
  const gridOptions = reactive({
    border: false,
    loading: true,
    align: 'center',
    showOverflow: 'tooltip',
    columnConfig: {
      resizable: true
    },
    data: [],
    columns: [
      { field: 'attribute_type', title: '宝石属性' },
      { field: 'name', title: '名称' },
      {
        field: 'action',
        title: '操作',
        width: 200,
        slots: { default: 'operate' }
      }
    ]
  });
  const getList = (currentPage, pageSize) => {
    gridOptions.loading = true;
    recycling({
      page: currentPage,
      page_size: pageSize
    }).then((res) => {
      console.log(res);
      gridOptions.loading = false;
      tablePage.total = res.data.total;
      gridOptions.data = res.data.data;
    });
  };
  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
    getList(currentPage, pageSize);
  };

  const reback = (row) => {
    resume({ id: row.id })
      .then((res) => {
        message.success(res.msg);
        getList(tablePage.currentPage, tablePage.pageSize);
        emit('done');
      })
      .catch((e) => {
        message.error(e);
      });
  };

  const action = (data) => {};

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
